<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="generator" content="www.jsdaima.com"
		  data-variable=",cn,10001,,10001,M1156015" />
	<meta name="viewport"
		  content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
	<title>学员查看</title>
	<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"
		  rel="external nofollow" />
	<!--    <link rel='stylesheet' href='css/index.css'>-->
	<link rel="stylesheet" href="/venue/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/venue/css/homePage.css" />
	<link rel="stylesheet" href="/venue/css/searchVenue.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>

	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="/venue/js/axios_interceptor.js" type="text/javascript" charset="UTF-8"></script>
	<!-- css样式文件 -->
	<style type="text/css">
		html, body, .containter {
			width: 100%;
			height: 500px;
			margin: 0 auto;
			box-shadow: 0 1px 5px #aaa;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		#container {
			width: 100%;
			height: 95%;
			float: left;
			box-sizing: border-box;
			padding: 0px;
			box-shadow: 0 1px 5px #aaa;
		}

		.info_ul {
			margin: 0 0 5px 0;
			padding: 0.2em 0;
		}

		.info_ui_Nimg {
			background-image: url("images/YNormal.png");
			background-position: 97% 0%;
			background-repeat: no-repeat;
			background-size: 40px;
		}

		.info_li {
			line-height: 26px;
			font-size: 15px;
			color: #0C8816;
		}

		.info_lierr {
			line-height: 26px;
			font-size: 15px;
			color: #D81E06;
			border: none;
		}

		.info_span {
			width: 80px;
			display: inline-block;
		}

		.btn {
			width: 80px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			cursor: pointer;
			background-color: #D81E06;
			color: #fff;
			margin: 0 auto;
		}

		.ta-c {
			text-align: center;
			margin-top: 10px;
		}
	</style>
	<!-- js文件 -->
	<script type="text/javascript"
			src="http://api.map.baidu.com/api?v=2.0&ak=B0N7sNh1CriFnUEaqC8VXstshDLGkDxz"></script>
	<!-- 页面地图js方法 -->

</head>

<body class=" nav-header">
<div  class="container col-xl-12 " id="sv">
	<!-- pagehead navbar -->
	<div id="pageHead" class="">
		<!-- Brand/logo -->
		<div id="logoDiv" class="dropdown">
			<a class="navbar-brand  dropdown-toggle" data-toggle="dropdown"><span id="logoSpan">{{venue.nickname}}</span></a>
			<!--					  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
			<!--						  <span class="sr-only">Toggle Dropright</span>-->
			<!--					  </button>-->
			<div class="dropdown-menu">
				<a class="dropdown-item" href="homePage.html">首页</a>
				<a class="dropdown-item" href="dynamic.html">动态</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="#">退出</a>
			</div>
		</div>


		<!-- Links -->
		<div id="linksDiv">
			<ul class="nav nav-tabs nav-justified justify-content-end">
				<li class="nav-item">
					<a class="nav-link" href="searchCoach.html">查看教练</a>
				</li>
				<li class="nav-item">
					<a class="nav-link active" href="searchVenue.html">查看场馆</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="followed.html">关注</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="message.html">通知</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="myCenter.html">场馆中心</a>
				</li>
			</ul>
		</div>

	</div>
	<!-- navbar end -->

	<!-- 分隔间距 -->
	<div id="separate"></div>

	<div id="venue">
		<!-- map -->
		<div id="venueMap">
			<div class="containter">
				<!-- 地图盒子 -->
				<div id="container"></div>
			</div>
		</div>

		<!-- info -->
		<div id="venueInfo">
			<div id="avatar"><img id="avatarImage" src="images/monkey.gif" ></div>
			<div class="infos">
				<div class="spans"><span>场馆名</span></div>
				<div class="xinxi"><span id="nkn">{{venue.nickname}}</span></div>
			</div>
			<div class="infos">
				<div class="spans"><span>电话</span></div>
				<div class="xinxi"><span id="pnb">{{venue.phoneNumber}}</span></div>
			</div>
			<div class="infos">
				<div class="spans"><span>地址</span></div>
				<div class="xinxi"><span id="addr">{{venue.address}}</span></div>
			</div>
		</div>
	</div>
	<!--venue block-->

</div>
<script src="/venue/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/venue/js/axios.js" type="text/javascript" charset="utf-8"></script>
<script src="/venue/js/jquery.min.js"></script>
<script src="/venue/js/popper.min.js"></script>
<script src="/venue/js/bootstrap.min.js"></script>
<script src="/venue/js/searchVenue.js"></script>


<!-- 页面地图js方法 -->

<script type="text/javascript">

	var points;
	$.ajax({
		url: "/venue/selectAll",
		contentType: "application/json; charset=utf-8",
		async : false,
		type: "get",
		dataType: "json",
		success: function (result) {
			points =result.data
			console.log(points);
		},
	});

	// 在指定容器创建地图实例并设置最大最小缩放级别
	var map = new BMap.Map("container", {
		minZoom : 5,
		maxZoom : 19
	});

	//初始化地图，设置中心点和显示级别
	//map.centerAndZoom(new BMap.Point(116.316967, 39.990748), 15);

	//定位成功事件
	//var myKeys=[];
	var myKeys = '';
	var lng = ''; //精度
	var lat = ''; //纬度
	// 百度地图API功能
	var map = new BMap.Map("container");
	var point = new BMap.Point(108.95, 34.27);
	map.centerAndZoom(point, 12);
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r) {
		console.log(r.point)
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);//标出所在地
			map.panTo(r.point);//地图中心移动
			//alert('您的位置：'+r.point.lng+','+r.point.lat);
			lng = r.point.lng;
			lat = r.point.lat;
			var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
			var gc = new BMap.Geocoder();
			gc.getLocation(point, function(rs) {
				var addComp = rs.addressComponents;
				console.log(rs.address);//地址信息
				//myKeys = [rs.address];     当有其他信息时，可以定义成数组
				myKeys = rs.address;
				//alert(myKeys);         //弹出所在地址
				var local = new BMap.LocalSearch(map, {
					renderOptions : {
						map : map,
						panel : "r-result"
					},
					pageCapacity : 3
				});
				local.searchInBounds(myKeys, map.getBounds());
			});
		} else {
			alert('failed' + this.getStatus());
		}
	}, {
		enableHighAccuracy : true
	})

	//开启鼠标滚轮缩放功能，仅对PC上有效
	map.enableScrollWheelZoom(true);

	// 将控件（平移缩放控件）添加到地图上
	map.addControl(new BMap.NavigationControl());

	//添加标注
	addMarker(points);

	// 创建图标对象
	function addMarker(points) {
		var point, marker;
		// 创建标注对象并添加到地图
		for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
			point = new BMap.Point(points[i].longitude, points[i].latitude);
			var myIcon;
			// 判断正常或者故障，根据不同装填显示不同Icon

			myIcon = new BMap.Icon("images/normal.png", new BMap.Size(32,
					32), {
				// 指定定位位置
				offset : new BMap.Size(16, 32),
				// 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置
				//imageOffset: new BMap.Size(0, -12 * 25)
			});

			// 创建一个图像标注实例
			marker = new BMap.Marker(point, {
				icon : myIcon
			});
			// 将覆盖物添加到地图上
			map.addOverlay(marker);

			//给标注点添加点击事件
			(function() {
				var thePoint = points[i];
				marker.addEventListener("click", function() {
					showInfo(this, thePoint);
				});
			})();
		}
	};

	//显示信息窗口，显示标注点的信息
	function showInfo(thisMaker, point) {
		$("#avatarImage").attr("src",point.avatar);
		$("#nkn").text(point.nickname);
		$("#pnb").text(point.phoneNumber);
		$("#addr").text(point.address);
		var sContent = '';
		sContent += '<ul class="info_ul info_ui_Nimg">';
		sContent += '   <li class="info_li">';
		sContent += '       <span class="info_span">场馆名：</span>';
		sContent += '       <span>'  + point.nickname +  '</span>';
		sContent += '   </li>';
		sContent += '   <li class="info_li">';
		sContent += '       <span class="info_span">场馆地址：</span>';
		sContent += '       <span>' + point.address +'</span>';
		sContent += '   </li>';
		sContent += '   <li class="info_li">';
		sContent += '       <span class="info_span">手机号：</span>';
		sContent += '       <span>' + point.phoneNumber +'</span>';
		sContent += '   </li>';
		sContent += '</ul>';

		// 创建信息窗口对象
		var infoWindow = new BMap.InfoWindow(sContent);

		//图片加载完毕重绘infowindow
		thisMaker.openInfoWindow(infoWindow);
	};

	// 弹窗增加点击事件
	function func(data) {
		alert("点击了机器编号为：" + data + "\n已经提交检修");
	}
</script>

<!--<button type="button"-->
<!--        class="btn btn-icon btn-primary btn-squared met-scroll-top hide">-->
<!--    <i class="icon wb-chevron-up" aria-hidden="true"> </i>-->
<!--</button>-->
</body>

</html>